<!--调试经营管理-项目列表-->
<template>
  <PageTemplate>
    <div class="sys-process" slot="content">
      <el-form
        inline
        :model="query"
        ref="query"
        label-position="right"
        label-width="110px"
        class="search-collapse-pro-form"
      >
        <SearchCollapsePro>
          <div slot="title" class="search-collapse-pro-title">
            <el-form-item label-width="0px">
              <el-input v-model="query.searchKey" placeholder="项目编码/项目名称" style="width:210px">
                <el-button slot="append" icon="el-icon-search" @click="queryDataTableLike"></el-button>
              </el-input>
            </el-form-item>
          </div>
          <div slot="collapse">
            <!-- 高级搜索具体内容 -->
            <el-row>
              <el-col :span="8">
                <el-form-item label="项目编码" prop="projectCode">
                  <el-input v-model="query.projectCode"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="项目名称" prop="projectName">
                  <el-input v-model="query.projectName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户名称" prop="marketCustomerName">
                  <el-input v-model="query.marketCustomerName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="市场机会" prop="marketInfoName">
                  <el-input v-model="query.marketInfoName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="承揽负责人" prop="leadingManName">
                  <el-input v-model="query.leadingManName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="实施项目经理" prop="projectManagerName">
                  <el-input v-model="query.projectManagerName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="项目阶段" prop="projectStage">
                  <el-select v-model="query.projectStage"  placeholder="请选择">
                    <el-option
                      v-for="item in projectStageMap"
                      :key="item.dictKey"
                      :label="item.dictText"
                      :value="item.dictKey">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 查询和重置按钮-->
            <el-row :gutter="10">
              <div class="btn-group-search">
                <el-col :span="2">&nbsp;</el-col>
                <el-col :span="6">
                  <el-button
                    type="primary"
                    class="btn-default"
                    @click="getAllDataTable"
                    size="small"
                  >{{$t('cm.query')}}</el-button>
                  <el-button
                    class="btn-second"
                    @click="queryReset('query')"
                    style="margin:0;"
                    size="small"
                  >{{$t('cm.reset')}}</el-button>
                </el-col>
              </div>
            </el-row>
          </div>
        </SearchCollapsePro>
      </el-form>
      <el-row class="row-empty-20"></el-row>
      <PageTableCollapse :collapseStatus="true">
        <el-row slot="title">
          <el-col>
            <div>
              <el-button type="primary" v-if="showBtn" icon="el-icon-edit" @click="addHandle">新增</el-button>
              <el-button type="primary" v-if="showBtn" icon="el-icon-upload2" @click="importHandle">导入</el-button>
              <el-button type="primary" v-if="showBtn" icon="el-icon-download" @click="exportHandle">导出</el-button>
            </div>
          </el-col>
        </el-row>
        <el-table
          class="table"
          border
          ref="multipleTable"
          :data="tables"
          tooltip-effect="dark"
          style="width: 100%"
          :show-overflow-tooltip="true"
          @selection-change="handleSelectionChange"
          :header-cell-style="{background:tableHeaderBGC}"
        >
          <!-- <el-table-column align="center" type="selection" width="60"></el-table-column> -->
          <el-table-column type="index" :index="indexMethod" :label="$t('cm.no')" align="center" width="60" fixed></el-table-column>
          <el-table-column prop="projectCode" label="项目编码" align="center" width="200"></el-table-column>
          <el-table-column prop="projectName" label="项目名称" align="center" width="200"></el-table-column>
          <el-table-column prop="marketCustomerName" label="客户名称" align="center" width="200"></el-table-column>
          <el-table-column prop="contractCode" label="合同编码" align="center" width="200"></el-table-column>
          <el-table-column prop="contractName" label="合同名称" align="center" width="200"></el-table-column>
          <el-table-column prop="leadingManName" label="承揽负责人" align="center" width="200"></el-table-column>
          <el-table-column prop="projectManagerName" label="项目经理" align="center" width="200"></el-table-column>
          <el-table-column prop="projectStageName" label="项目阶段" align="center" width="200"></el-table-column>
          <el-table-column prop="marketInfoName" label="市场机会" align="center" width="200"></el-table-column>
          <el-table-column prop="messageFunds" label="信息来源" align="center" width="200"></el-table-column>
          <el-table-column :label="$t('cm.operate')" prop="statussss" align="center" width="220" fixed="right">
            <template slot-scope="scope">
              <ListBtn
                :options="btnsUndertake"
                :row-data="scope.row"
                @triggerListBtn="handleListBtn"
                :show-btn=true>
                <!-- :show-btn="showBtn"-->
              </ListBtn>
            </template>
          </el-table-column>
        </el-table>
        <div class="block pager-customer">
          <el-pagination
            background
            layout="total,prev,pager, next,jumper"
            :current-page.sync="pagingCurrentPageNum"
            :page-sizes="pagingPageSizes"
            :page-size="pagingPageSize"
            :total="pagingTotal"
            @size-change="pagingHandleSizeChange"
            @current-change="pagingHandleCurrentChange"
          >
          </el-pagination>
        </div>
      </PageTableCollapse>


      <!-- 导入 -->
      <el-dialog :visible.sync="dialogImportVisible" width="732px">
        <div slot="title" class="dialog-edit-head">
          <i>导入</i>
        </div>
        <el-form label-width="120px">
          <el-row>
            <div style="text-align: center; margin-bottom: 10px;">
              <a @click="downCardTemplate" style="cursor: pointer;">模板下载</a>
            </div>
          </el-row>
          <el-row>
            <el-col :span="24" style="text-align:center;">
              <div>
                <el-upload
                  class="upload-demo"
                  drag
                  :http-request="uploadCardTemplate"
                  action
                  ref="cardupload"
                  :on-remove="handleTemplateRemove"
                  :on-success="handleTemplateSuccess"
                  :before-upload="beforeTemplateUpload"
                  :on-progress="handleTemplateProgress"
                  name="file"
                  :file-list="fileList"
                >
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">
                    将文件拖到此处，或
                    <em>点击上传</em>
                  </div>
                </el-upload>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogImportVisible = false">取 消</el-button>
        </div>
      </el-dialog>



    </div>
  </PageTemplate>
</template>

<script>
  import { mapState, mapActions } from 'vuex'
  import PageTemplate from '@/components/common/PageTemplate'
  import PageTableCollapse from '@/components/common/PageTableCollapse'
  import SearchCollapsePro from '@/components/common/SearchCollapsePro'
  import ListBtn from '@/components/btn/ListBtn'
  import { ALERT } from '@/utils/responseHandle'
  import * as Constant from '@/utils/constant'
  import {COMMON} from '@/utils/commonUtil'
  import Pagination from '@/mixins/Pagination'
  import HasBtn from '@/mixins/HasBtn'
  import opr_management from '@/api/opr_management'
  import sys_manage from '@/api/sys_manage'
  import {dateFtt} from '@/utils/datetime'

  export default {
    components: {
      PageTemplate,
      PageTableCollapse,
      SearchCollapsePro,
      ListBtn
    },
    data () {
      return {
        projectStageMap:[],
        query: {
          searchKey: "",
          projectCode: "",
          marketCustomerName: "",
          marketInfoName: "",
          leadingManName: "",
          projectManagerName: "",
          projectStage: "",
        },
        tables:[],
        btnsUndertake: [//承揽阶段的按钮
          {
            value: 'edit',
            label: 'cm.edit'
          },
          {
            value: 'look_undertake',
            label: 'opm.look_undertake'
          },
          {
            value: 'edit_undertake',
            label: 'opm.edit_undertake'
          },
          {
            value: 'del',
            label: 'cm.delete'
          },
        ],
        btns: [//实施阶段的按钮
          {
            value: 'edit',
            label: 'cm.edit'
          },
          {
            value: 'look_undertake',
            label: 'opm.look_undertake'
          },
          {
            value: 'edit_undertake',
            label: 'opm.edit_undertake'
          },
          {
            value: 'look_carry',
            label: 'opm.look_carry'
          },
          {
            value: 'edit_carry',
            label: 'opm.edit_carry'
          },
          {
            value: 'del',
            label: 'cm.delete'
          },
        ],
        dialogImportVisible:false,
        fileList:[],

      }
    },
    created () {
      //获取项目阶段字典
      this.sysDictLoadByPaging("project_stage");
      //获取列表数据
      this.getAllDataTable();
    },
    mixins: [Pagination, HasBtn],
    computed: {
      ...mapState({
        tableHeaderBGC: state => state.common.tableHeaderBGC
      })
    },
    methods:{
      //获取项目阶段字典
      sysDictLoadByPaging (key) {
        sys_manage.sysDictLoadByPaging({dictGroupKey: key}, result => {
          if (result.code === Constant.RT_SUCCESS) {
            this.projectStageMap = result.data;
          } else {
            ALERT.error(result.msg)
          }
        })
      },
      handleListBtn({btn,row}){
        if(btn==="edit"){//编辑
          COMMON.routerTo(Constant.ROUTE_RUN_PROJECT_EDIT.index, this.$router, { id: row.id })
        }else if(btn==="look_undertake"){ //查看项目承揽
          COMMON.routerTo(Constant.ROUTE_RUN_PROJECT_UNDERTAKE_LOOK.index, this.$router, { id: row.id })
        }else if(btn==="edit_undertake"){ //编辑项目承揽
          COMMON.routerTo(Constant.ROUTE_RUN_PROJECT_UNDERTAKE_EDIT.index, this.$router, { id: row.id })
        }else if(btn==="look_carry"){ //查看项目实施
          COMMON.routerTo(Constant.ROUTE_RUN_PROJECT_CARRY_LOOK.index, this.$router, { id: row.id })
        }else if(btn==="edit_carry"){ //编辑项目实施
          COMMON.routerTo(Constant.ROUTE_RUN_PROJECT_CARRY_EDIT.index, this.$router, { id: row.id })
        }else if(btn==="del"){
          COMMON.confirm({}, () => {
            opr_management.removeProjectInfo({id:row.id}, result => {
              if (result.code === Constant.RT_SUCCESS) {
                this.getAllDataTable()
                ALERT.success(result.msg)
              } else {
                ALERT.error(result.msg)
              }
            })
          })
        }
      },
      //新增
      addHandle () {
        COMMON.routerTo(Constant.ROUTE_RUN_PROJECT_ADD.index, this.$router)
      },
      // 导入
      importHandle (){
        this.dialogImportVisible = true
      },
      //下载模板
      downCardTemplate () {
        COMMON.downloadLinkByUrl('./static/xlsx/template_excel_import_oprManagementProjectList.xlsx', '调试经营管理-项目列表导入模板')
      },
      uploadCardTemplate (fileObj) {
        const formData = new FormData()
        formData.append('file', fileObj.file)
        opr_management.projectInfoImportFromExcel(formData, response => {
          if (response.code === Constant.RT_SUCCESS) {
            fileObj.onProgress({ percent: 100 })
            setTimeout(() => {
              fileObj.onSuccess(response, fileObj)
              this.getAllDataTable()
            }, 200)
          } else {
            ALERT.errorDefault(response)
          }
          this.fileList = []
          COMMON.hideLoading()
        })
      },
      beforeTemplateUpload (file) {
        let fileType = file.name.split('.').pop()
        const isXLSX = fileType === 'xlsx' || fileType === 'xls'
        if (!isXLSX) {
          this.$message.warning('导入模板文件类型不正确，请下载模板进行修改')
            return false
        }
        return true
      },
      handleTemplateRemove (file, fileList) {
        this.fileList = fileList
      },
      handleTemplateSuccess (res, option) {
        ALERT.success('导入成功！')
        this.fileList = []
        this.getAllDataTable();
      },
      handleTemplateProgress (event, file, fileList) {
        if (event.percent === 100) {
          this.dialogImportVisible = false
          COMMON.showLoading('正在导入中...')
        }
      },
      // 导出
      exportHandle () {
        let params = Object.assign({},this.query,{
          pageNum:this.pagingCurrentPageNum,
          pageSize:this.pagingPageSize
        })
        let fileName = `调试经营管理_项目列表_${dateFtt('yyyy-MM-dd', new Date())}`
        opr_management.projectInfoExportExcel(params, response => {
          if (response.code === Constant.RT_SUCCESS) {
            COMMON.downloadLinkByUrl(response.data.webRequestUrl, fileName)
          } else {
            ALERT.alertResp(response)
          }
        })
      },
      //重置操作
      queryReset (formName) {
        this.$refs[formName].resetFields()
      },
      queryDataTableLike () {
        this.getAllDataTable();
      },
      //获取列表数据
      getAllDataTable () {
        this.queryTableList({
          ...this.query,
          pageNum: this.pagingCurrentPageNum,
          pageSize: this.pagingPageSize
        })
      },
      //统一与后台操作的方法
      queryTableList (params) {
        //这里的params是对象
        //注意 如果后台json转对象 时间类型好像会抛异常  转到后台 前台用 qs 来转换数据 设置一个全局拦截器 main.js 参考
        let _this = this
        let tables = []
        let totalCount = 0
        opr_management.getProjectList(params, result => {
          if (result.code === Constant.RT_SUCCESS) {
            //表格数据  数组
            tables = result.data.results
            //分页数据
            totalCount = result.data.totalRows
          } else {
            // _this.$t('cm.tips')
            ALERT.error(result.data.msg)
          }
          _this.setPagingTotal(totalCount)
          this.tables = tables
        })
      },
    }
  }

</script>

<style lang="scss">

</style>
